import 'package:flutter/material.dart';

void main() {
  runApp(new TabbedAppBarSample());
}

class TabbedAppBarSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new DefaultTabController(
        length: choices.length,
        child: new Scaffold(
          appBar: PreferredSize(
              child: new AppBar(
                backgroundColor: Colors.redAccent,
                titleSpacing: 0.0, //标题两边的空白区域,
                // brightness: Brightness.light, //控制状态栏的颜色，lignt 文字是灰色的，dark是白色的
                title: SearchBox(), // 搜索框的组件容器
                bottom: PreferredSize(
                  // 导航栏bottom
                  child: Container(
                    color: Colors.white,
                    child: new TabBar(
                      isScrollable: true,
                      unselectedLabelColor: Colors.black,
                      labelColor: Colors.red,
                      indicatorColor: Colors.red,
                      tabs: choices.map((Choice choice) {
                        return new Tab(
                          text: choice.title,
                          // icon: new Icon(choice.icon),
                        );
                      }).toList(),
                    ),
                  ),
                  preferredSize: Size(30, 30),
                ), // 在appbar下面显示的东西)
              ),
              preferredSize: Size.fromHeight(85)),
          body: new TabBarView(
            children: choices.map((Choice choice) {
              return new Padding(
                padding: const EdgeInsets.all(0.0),
                child: new ChoiceCard(choice: choice),
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}

class Choice {
  const Choice({this.title, this.icon});
  final String title;
  final IconData icon;
}

const List<Choice> choices = const <Choice>[
  const Choice(title: 'CAR', icon: Icons.directions_car),
  const Choice(title: 'BICYCLE', icon: Icons.directions_bike),
  const Choice(title: 'BOAT', icon: Icons.directions_boat),
  const Choice(title: 'BUS', icon: Icons.directions_bus),
  const Choice(title: 'TRAIN', icon: Icons.directions_railway),
  const Choice(title: 'WALK', icon: Icons.directions_walk),
];

class ChoiceCard extends StatelessWidget {
  const ChoiceCard({Key key, this.choice}) : super(key: key);

  final Choice choice;

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.display1;
    return new Container(
      color: Colors.white,
      child: new Center(
        child: new Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            new Icon(choice.icon, size: 128.0, color: textStyle.color),
            new Text(choice.title, style: textStyle),
          ],
        ),
      ),
    );
  }
}

// 搜索框wiget
class SearchBox extends StatefulWidget {
  _SearchBoxState createState() => _SearchBoxState();
}

class _SearchBoxState extends State<SearchBox> {
  @override
  void _pushSearch() {
    Navigator.of(context).push(MaterialPageRoute(builder: (context) {
      return Scaffold(
        appBar: AppBar(title: Text('SearchPage')),
        // body: ListView(children: divided)
      );
    }));
  }

  Widget build(BuildContext context) {
    return Container(
      child: Container(
          padding: EdgeInsets.fromLTRB(20.0, 5.0, 20.0, 5.0),
          // color: Colors.redAccent,
          child: Center(
            child: GestureDetector(
              child: Stack(
                children: <Widget>[
                  Opacity(
                    opacity: 0.2,
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.black,
                        borderRadius: BorderRadius.all(Radius.circular(4.0))),
                    ),
                  ),
                  Positioned(
                    left: 15.0,
                    top: 3.0,
                    child: Row(
                      children: <Widget>[
                        Icon(
                          Icons.search,
                          color: Colors.white,
                          size: 20.0,
                        ),
                        Container(
                          margin: EdgeInsets.only(left: 5.0),
                          child: Text('搜索宝贝昵称或粘贴淘宝标题', style: TextStyle(fontSize: 13.0)),
                        )
                      ],
                    ),
                  ),
                ],
              ),
              onTap: _pushSearch,
            ),
          )),
    );
  }
}
